<?php
use app\assets\ApiAsset;
use app\assets\LayerAsset;
use app\assets\TableAsset;
use app\assets\EchartsAsset;
use app\models\KeyMap;
use app\models\UserCardRecharge;
use app\widgets\LinkPager;
use app\widgets\ManagerTableOp; 
use yii\helpers\Html;
use yii\helpers\Url;
use dosamigos\datepicker\DatePicker;


EchartsAsset::register($this);

$this->title = '充值套餐分析';
$this->params['breadcrumbs'][] = '系统统计';
$this->params['breadcrumbs'][] = $this->title;
?>
<?php echo Html::beginForm('?', 'get', ['class'=>'form-inline']);?>
<div class="form-group">
    <label for="search_agentname" class="sr-only">代理商</label>
    <?php echo Html::textInput('search_agentname', Yii::$app->request->get('search_agentname'), ['id' => 'search_agentname', 'class' => 'form-control', 'placeholder' => '代理商', 'style' => 'width: 120px;']);?>
</div>
<div class="form-group">
    <label for="search_trade_type" class="sr-only">支付方式</label>
    <?php echo Html::dropDownList('search_trade_type', Yii::$app->request->get('search_trade_type'), KeyMap::getValues('user_card_recharge_trade_type'), ['id' => 'search_trade_type', 'class' => 'form-control', 'prompt' => '支付方式']);?>
</div>
<div class="form-group">
    <label for="search_recharge_type" class="sr-only">充值状态</label>
    <?php echo Html::dropDownList('search_recharge_type', Yii::$app->request->get('search_recharge_type'), KeyMap::getValues('recharge_type'), ['id' => 'search_recharge_type', 'class' => 'form-control', 'prompt' => '充值状态']);?>
</div>
<div class="form-group">
    <label for="search_status" class="sr-only">来源</label>
    <?php echo Html::dropDownList('search_source', Yii::$app->request->get('search_source'), KeyMap::getValues('source'), ['id' => 'search_source', 'class' => 'form-control', 'prompt' => '来源']);?>
</div>
<div class="form-group">
    <label for="time">开始时间</label>
    <?php echo DatePicker::widget([ 
        'name' => 'search_start_time', 
        'options' => ['placeholder' => '开始时间'], 
        'attribute' => 'time',
        'template' => '{addon}{input}',
        'value' => $start,
        'clientOptions' => [ 
            'autoclose' => true, 
            'format' => 'yyyy-mm-dd',
            'todayHighlight' => true, 
        ] 
    ]); ?>
</div>
<div class="form-group">
    <label for="time">结束时间</label>
    <?php echo DatePicker::widget([ 
        'name' => 'search_end_time', 
        'options' => ['placeholder' => '结束时间'], 
        'attribute' => 'time',
        'template' => '{addon}{input}',
        'value' => $end,
        'clientOptions' => [ 
            'autoclose' => true, 
            'format' => 'yyyy-mm-dd',
            'todayHighlight' => true, 
        ] 
    ]); ?>
</div>
<div class="form-group">
    <button class="btn btn-primary btn-sm">搜索</button>
</div>
<?php echo Html::endForm();?>
<br/>

<div id="main" style="width: 90%;height:600px;"></div>
	<script type="text/javascript">
		var menu = <?php echo json_encode($menu);?>;
		var record = <?php echo json_encode($record);?>;
		var count = <?php echo count($menu);?>;
		function pageInit(){
			var myChart = echarts.init(document.getElementById('main'),'macarons');
			var seriesData = [];
			for(var i=0;i<count;i++){
				seriesData.push({
					value:record[i],
					name:menu[i],
				});
			}
			myChart.setOption(getChartsStatusOption(seriesData));
		}
		function getChartsStatusOption(seriesData){
			return {
				title: {
		        text: '充值套餐分析',
		        left: 'center'
    			},
			    tooltip: {
			        trigger: 'item',
			        formatter: '{a} <br/>{b} : {c} ({d}%)'
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: menu
			    },
			    series: [
			        {
			            name: '充值套餐比例',
			            type: 'pie',
			            radius: '75%',
			            center: ['50%', '60%'],
			            data: seriesData,
			            emphasis: {
			                itemStyle: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			
		}
	}
	</script>
	
